<template>
	<view>
		<view class="b_total" @click="openDate">统计汇总：{{total}}</view>
		<view class="b_content">
			<view class="b_date">
				<picker mode="date" fields="month" @change="changeLog">
					<view class="flex_between">
						<view v-if="date!=''">{{date}}</view>
						<view v-else>月份选择</view>
						<image v-if="date!=''" src="/static/close.png" @click.stop="clearDate" mode="widthFix" class="e_close"></image>
					</view>
				</picker>
			</view>
			<view class="b_tit">收益统计</view>
			<view class="b_list">
				<view class="flex_between b_item">
					<view class="b_data b_head">月份</view>
					<view class="b_data b_head">收益</view>
					<view class="b_data b_head">环比</view>
				</view>
				<view class="flex_between b_item" v-for="item in list">
					<view class="b_data">{{item.date}}</view>
					<view class="b_data">{{item.money}}</view>
					<view class="b_data">{{item.increase}}%<text class="b_down" v-if="item.increase<0">↓</text><text class="b_up" v-if="item.increase>0">↑</text></view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<view v-if="ismore">到底了~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '',
				list: [],
				page: 0,
				isloading: false,
				ismore: false,
				total: ''
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList(){
				this.page++;
				this.isloading = true;
				this.$axios('RegionalService/incomeCompany', "POST", 'regional',{
					date: this.date
				}).then(res => {
					this.isloading=false;
					if (res.data.code == 200) {
						this.total = res.data.data.totalmoney;
						this.list = [...this.list,...res.data.data.list];
						this.ismore = res.data.data.list.length<=0;
					}
				})
			},
			changeLog(e){
				this.date = e.detail.value
				this.page = 0;
				this.list = [];
				this.getList();
			},
			clearDate(){
				this.date = '';
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
	padding-bottom: 100rpx;
}
.b_content{
	padding: 20rpx;
}
.b_total{
	color: $bg-color;
	font-weight: bold;
	font-size: 32rpx;
	border-bottom: 4rpx solid #eee;
	padding-bottom: 20rpx;
	padding-left: 30rpx;
}
.b_date{
	border: 2rpx solid #eee;
	border-radius: 12rpx;
	padding: 20rpx;
	color: #999;
	image{
		width: 20rpx;
		height: 20rpx;
	}
}
.b_tit{
	color: $bg-color;
	font-weight: bold;
	padding: 20rpx 0;
	font-size: 32rpx;
	position: relative;
	padding-left: 20rpx;
	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 36rpx;
		width: 8rpx;
		background-color: $base-color;
		border-radius: 8rpx;
		opacity: .8;
	}
}
.b_list{
	text-align: center;
	border: 2rpx solid #eee;
	.b_item{
		.b_head{
			font-weight: bold;
			font-size: 30rpx;
		}
		.b_data{
			width: 33.3333%;
			padding: 16rpx 0;
			.b_up{
				color: green;
				font-size: 32rpx;
				padding-left: 6rpx;
			}
			.b_down{
				color: darkred;
				font-size: 32rpx;
				padding-left: 6rpx;
			}
		}
		&:nth-child(even){
			background: #f1f0f0;
		}
	}
}
</style>
